import {
  Card,
  Col,
  Row,
  Button,
  Popover,
  Modal,
  Form,
  Input,
  Popconfirm,
  message,
  Tree,
} from 'antd';
import './index.css';
// import SearchTree from '../../../components/SearchTree'
import ProTable from '@ant-design/pro-table';
import { PlusOutlined } from '@ant-design/icons';
import type { ProColumns } from '@ant-design/pro-table';
// 搜索 表头
import columnsData, { columnsDataType } from './data';
// 模拟的数据
import tableData from '../../mock/tableData';
import React, { useState } from 'react';
import { ModelDesign } from 'bsin-workflow-ui';

const ModelManagement = () => {
  const { Search } = Input;

  const xmlUrl = `<?xml version="1.0" encoding="UTF-8"?>
    <definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:omgdi="http://www.omg.org/spec/DD/20100524/DI" xmlns:omgdc="http://www.omg.org/spec/DD/20100524/DC" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" id="sid-38422fae-e03e-43a3-bef4-bd33b32041b2" targetNamespace="http://bpmn.io/bpmn" exporter="bpmn-js (https://demo.bpmn.io)" exporterVersion="5.1.2">
    <process id="Process_1" isExecutable="false">
        <startEvent id="StartEvent_1y45yut" name="开始">
        <outgoing>SequenceFlow_0h21x7r</outgoing>
        </startEvent>
        <task id="Task_1hcentk">
        <incoming>SequenceFlow_0h21x7r</incoming>
        </task>
        <sequenceFlow id="SequenceFlow_0h21x7r" sourceRef="StartEvent_1y45yut" targetRef="Task_1hcentk" />
    </process>
    <bpmndi:BPMNDiagram id="BpmnDiagram_1">
        <bpmndi:BPMNPlane id="BpmnPlane_1" bpmnElement="Process_1">
        <bpmndi:BPMNShape id="StartEvent_1y45yut_di" bpmnElement="StartEvent_1y45yut">
            <omgdc:Bounds x="152" y="102" width="36" height="36" />
            <bpmndi:BPMNLabel>
            <omgdc:Bounds x="160" y="145" width="22" height="14" />
            </bpmndi:BPMNLabel>
        </bpmndi:BPMNShape>
        <bpmndi:BPMNShape id="Task_1hcentk_di" bpmnElement="Task_1hcentk">
            <omgdc:Bounds x="240" y="80" width="100" height="80" />
        </bpmndi:BPMNShape>
        <bpmndi:BPMNEdge id="SequenceFlow_0h21x7r_di" bpmnElement="SequenceFlow_0h21x7r">
            <omgdi:waypoint x="188" y="120" />
            <omgdi:waypoint x="240" y="120" />
        </bpmndi:BPMNEdge>
        </bpmndi:BPMNPlane>
    </bpmndi:BPMNDiagram>
    </definitions>`;

  // 树的数据

  const treeData = [
    {
      title: '总经办',
      key: '0',
      children: [
        {
          title: '项目审批',
          key: '1',
        },
      ],
    },
    {
      title: 'HR人事',
      key: '2',
      children: [
        {
          title: '员工休假',
          key: '3',
        },
        {
          title: '员工入职',
          key: '4',
        },
        {
          title: '招聘面试',
          key: '5',
        },
      ],
    },
    {
      title: '财务',
      key: '6',
      children: [
        {
          title: '采购类',
          key: '7',
        },
        {
          title: '报销类',
          key: '8',
        },
      ],
    },
  ];

  const { TextArea } = Input;
  // 新增模态框
  const [isAddinfoModalVisible, setIsAddinfoModalVisible] = useState(false);

  const addInfo = () => {
    setIsAddinfoModalVisible(true);
  };

  // 设计模态框
  const [isDesignerModalVisible, setIsDesignerModalVisible] = useState('none');

  const designer = () => {
    setIsDesignerModalVisible('block');
  };

  // 删除提醒 确认
  const confirmDel = () => {
    message.success('删除成功');
  };

  // 删除提醒 取消
  const onCancelDel = () => {
    message.error('取消删除，删除失败');
  };

  // 表头数据
  const columns: ProColumns<columnsDataType>[] = columnsData;
  // 气泡框
  const content = (
    <div className="popover-text">
      <p>查看流程图</p>
      <p>导出XML文件</p>
      <p>查看基础信息</p>
      <p>编辑基础信息</p>
    </div>
  );

  // 操作行数据 自定义操作行
  const actionRender: any = (text: any, record: any, index: number) => (
    <ul className="ant-list-item-action" style={{ margin: 0, width: 230 }}>
      <li>
        <a onClick={designer}>设计</a>
        <em className="ant-list-item-action-split"></em>
      </li>
      <li>
        <a onClick={() => {}}>配置</a>
        <em className="ant-list-item-action-split"></em>
      </li>
      <li>
        <a onClick={() => {}}>部署</a>
        <em className="ant-list-item-action-split"></em>
      </li>
      <li>
        <Popconfirm
          className="delPopconfirm"
          title="是否确认删除？"
          okText="是"
          cancelText="否"
          onConfirm={confirmDel}
          onCancel={onCancelDel}
        >
          <a onClick={() => {}}>删除</a>
        </Popconfirm>
        <em className="ant-list-item-action-split"></em>
      </li>
      <li>
        <Popover content={content} placement="bottomLeft" trigger="click">
          <a>更多</a>
        </Popover>
      </li>
    </ul>
  );

  // 自定义数据的表格头部数据
  columns.forEach((item: any) => {
    item.dataIndex === 'action' ? (item.render = actionRender) : undefined;
  });

  return (
    <div>
      <Row gutter={18}>
        {/* 左侧 */}
        <Col span={6}>
          <Card>
            <Search style={{ marginBottom: 8 }} placeholder="请输入搜索内容" />
            <Tree
              // 渲染数据
              treeData={treeData}
              // 展开所有节点数据
              defaultExpandAll
            />
          </Card>
        </Col>
        {/* 右侧 */}
        <Col span={18}>
          <Card>
            {/* Pro表格 */}
            <ProTable<columnsDataType>
              headerTitle="模型管理"
              bordered
              // 表头
              columns={columns}
              // 请求获取的数据
              // request={
              //     async params => getMerchantList(params)
              // }
              defaultData={tableData}
              rowKey="id"
              // 本地存储表格列的显示数据
              columnsState={{
                persistenceKey: 'pro-table-singe-demos',
                persistenceType: 'localStorage',
              }}
              // 搜索框配置
              search={{
                labelWidth: 'auto',
              }}
              // 搜索表单的配置
              form={{
                ignoreRules: false,
              }}
              pagination={{
                pageSize: 5,
              }}
              dateFormatter="string"
              //设置工具栏按钮及事件
              toolBarRender={() => [
                <Button
                  key="button"
                  icon={<PlusOutlined />}
                  type="primary"
                  onClick={addInfo}
                >
                  新增
                </Button>,
              ]}
            />
          </Card>
        </Col>
      </Row>
      {/* 增加模态框 */}
      <Modal
        centered
        width={700}
        title="新建"
        open={isAddinfoModalVisible}
        onOk={() => {
          setIsAddinfoModalVisible(false);
        }}
        onCancel={() => {
          setIsAddinfoModalVisible(false);
        }}
        okText="下一步"
      >
        <Form
          name="basic"
          labelCol={{ span: 5 }}
          wrapperCol={{ span: 16 }}
          autoComplete="off"
        >
          <Form.Item label="分类" name="classify">
            <Input />
          </Form.Item>
          <Form.Item
            label="名称"
            name="name"
            rules={[{ required: true, message: '请输入名称' }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="标识编码"
            name="identificationCode"
            rules={[{ required: true, message: '请输入唯一的编码' }]}
          >
            <Input />
          </Form.Item>
          <Form.Item label="描述" name="describe">
            <TextArea rows={4} />
          </Form.Item>
        </Form>
      </Modal>
      {/* 设计模态框 */}
      <div
        className="designer-modal"
        style={{ display: isDesignerModalVisible }}
      >
        <span
          onClick={() => {
            setIsDesignerModalVisible('none');
          }}
          className="close-designer"
        >
          x
        </span>
        <ModelDesign xmlStr={xmlUrl}></ModelDesign>
      </div>
    </div>
  );
};

export default ModelManagement;
